<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>问题详情</title>
<link rel="stylesheet" href="./static/css/common.css">
<style>
  .user{
    display: flex;
    padding:10px 15px;
    align-items:center;
    border-top: 1px solid #F1F0F0;
    border-bottom: 1px solid #F1F0F0;
  }
  .user .headbox{
    width: 34px;
    height: 34px;
    border-radius: 17px;
    overflow: hidden;
  }
  .user .userHead{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .user .userInfo{
    color: #535252;
    margin-left:10px;
    flex:1;
  }
  .itemBox{
    padding: 10px 15px;
  }

  .conterImage{
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  
  
</style>
    
</head>
<body>
  <div id="app" v-cloak>
     
    <div class="user">
      <div class="headbox"><img class="userHead" :src="user.userHeader" alt=""></div>
      <div class="userInfo">
        <div class="userName">{{user.userNick}}</div>
        <div class="time gray">{{time(problem.created_at)}}</div>
      </div>
      <a :href="appUrl" id="appBtn" type="button" >关注</a>
    </div>
    <div class="center itemBox">
        <h4 class="font4">{{problem.title}}</h4>
        <div class="font3" style="margin:10px 0;">
          {{problem.center}}
        </div>
        <div>
          <img v-for="(item,index) in problem.images" :key="index" :src="item" class="conterImage" alt="">
        </div>
    </div>
    <div class="pad5">
      <h4 class="font4">评论</h4>
      <div>
        <div v-for="(item,index) in replys" :key="index" >
          <div class="user" style="border:none;padding:0;margin-top:10px">
            <div class="headbox"><img class="userHead" :src="item.commentUser.userHeader" alt=""></div>
            <div class="userInfo">
              <div class="userName">{{item.commentUser.userNick}}</div>
              <div class="time gray">{{time(item.createtime)}}</div>
            </div>
            <div class="gray">{{item.commentStars}} <img class="icon" src="./static/like_nor@2x.png" alt=""></div>
          </div>
          <p style="margin:0;padding:10px 10px 10px 44px;border-bottom:1px solid #F1F0F0">{{item.commentContent}}</p>
        </div>
      </div>
    </div>
    <div class="footBox">
      <img src="./static/image/logo.png" alt="">
      <div class="center">
        <h5>牙记</h5>
        <div class="fixBoton">牙套计时分享社区</div>
      </div>
      <a :href="appUrl" class="lastBox">立即体验</a>
    </div>
    </div>
   
  </div>
  <script src="./static/js/vue.js"></script>
  <script src="./static/js/axios.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        appUrl:'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825',
        problem:'',
        user:'',
        wapId:'',
        replys:[],
      },
      created() {  
        let str='';
        let waptxt = '';
        let wapId = '';
        let url = location.href.split('?');
        console.log(url)
         Object.keys(url).forEach(function(key){
          if(url[key].indexOf('id=') > -1){
             waptxt =  url[key].split('id=');
             wapId = parseInt(waptxt[1]);
          };
        });
        axios.get(`https://www.yajiapp.com:8443/super_yaji/problem/wap/${wapId}`)
        .then(res =>{
          console.log(res)
          this.problem = res.data.data.problem;
          
          this.user = res.data.data.problem.userInfo;
          this.problem.center = res.data.data.content;
          this.replys = res.data.data.comment;
          console.log(res.data.data)
          this.wapId = wapId;
          console.log(this.wapId)
        });
        const  ua = navigator.userAgent.toLowerCase();	
        if (/iphone|ipad|ipod/.test(ua)) {
          this.appUrl = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825';
        } else if (/android/.test(ua)) {
        this.appUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.grzx.toothdiary&from=groupmessage'
        }
      },
      methods:{
        time(val) {
          console.log(val)
          const now =  new Date(val)
          const month = now.getMonth()+1;
          const date = now.getDate();
          const hour = now.getHours();
          const minute = now.getMinutes();
          function editTime(time){
            return time < 10? "0"+time : time
          }
          return `${editTime(month)}-${editTime(date)} ${editTime(hour)}:${editTime(minute)}`
        },

        shearInfo(val) {
          console.log(val)
          window.location = `index.html#/Mreply?replyId=${this.wapId}&wap=${val}`;
        },
        contentFun(val) {
          const txt ={};
          const obj = JSON.parse(val)
          for (let i =0; i < obj.length; i++) {
            for (let item in obj[i]){
              if (item == 'content') {
                 txt.content = obj[i].content
              };
              if (item == 'imageUrl') {
                txt.img = obj[i].imageUrl
              }
            }
          }
          return txt
        },
        goApp() {
          console.log(123)
        }
      }

    })
  </script>
</body>
</html>